<template>
  <div class="beam-overview-container" v-loading="loading">
    <div class="warp-1">
      <div class="product-nums">
        <div class="out-ring"></div>
        <div class="inner-ring"></div>
        <div class="value">
          {{ Number(dataSource.allCount || 0).toLocaleString() }}
        </div>
        <div class="label">计划生产梁数</div>
      </div>
      <div class="tip-group">
        <div class="tip_1">
          <div class="block-icon">
            <div></div>
            <div></div>
          </div>
          <div class="label">已生产</div>
          <div class="body">
            <div class="value" @click="handelTableModal(1)">
              {{ Number(dataSource.completeCount || 0).toLocaleString() }}
            </div>
            <div class="pec">{{ dataSource.completeRadio || 0 }}%</div>
          </div>
        </div>
        <div class="tip_2">
          <div class="block-icon">
            <div></div>
            <div></div>
          </div>
          <div class="label">未生产</div>
          <div class="body">
            <div class="value">
              {{ Number(dataSource.surplusCount || 0).toLocaleString() }}
            </div>
            <div class="pec">{{ dataSource.surplusRadio || 0 }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="warp-2">
      <div class="nums-item" @click="handelTableModal(5)">
        <div class="total">
          {{ Number(dataSource.yscCount || 0).toLocaleString() }}
        </div>
        <div class="name">已生产</div>
      </div>
      <div class="nums-item" @click="handelTableModal(6)">
        <div class="total">
          {{ Number(dataSource.dyjCount || 0).toLocaleString() }}
        </div>
        <div class="name">待压浆</div>
      </div>
      <div class="nums-item" @click="handelTableModal(2)">
        <div class="total">
          {{ Number(dataSource.clCount || 0).toLocaleString() }}
        </div>
        <div class="name">已存梁</div>
      </div>
      <div class="nums-item" @click="handelTableModal(3)">
        <div class="total">
          {{ Number(dataSource.jqCount || 0).toLocaleString() }}
        </div>
        <div class="name">已架设</div>
      </div>
    </div>
    <div class="warp-3">
      <div class="chart-dom" ref="drawerBarChart" v-if="chartShow"></div>
      <div class="group-button">
        <!-- //1天 2月 3季度 4年 -->
        <div
          :class="statisType == '1' && 'active'"
          @click="checkStatisType('1')"
        >
          日
        </div>
        <div
          :class="statisType == '2' && 'active'"
          @click="checkStatisType('2')"
        >
          月
        </div>
        <div
          :class="statisType == '3' && 'active'"
          @click="checkStatisType('3')"
        >
          季度
        </div>
        <div
          :class="statisType == '4' && 'active'"
          @click="checkStatisType('4')"
        >
          年
        </div>
      </div>
    </div>
    <!-- 明细弹窗 -->
    <tableModal
      :visible.sync="tableModalVisible"
      :scStatus="scStatus"
      :key="tableKey"
    ></tableModal>
  </div>
</template>

<script>
import { getLoginData } from "@/tools";
import { beamOverview } from "@/api/wisdom-beam/home";
import tableModal from "./tableModal.vue";
export default {
  components: {
    tableModal,
  },
  data() {
    return {
      productSevenData: {},
      dataSource: {},
      loading: false,
      chartPie: null,
      chartBar: null,
      tableModalVisible: false,
      scStatus: "",
      tableKey: Date.now(),
      statisType: "1",
      chartShow: true,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    checkStatisType(statisType = "1") {
      this.statisType = statisType;
      this.chartShow = false;
      if (statisType == "1") {
        this.productSevenData = {
          xData: this.dataSource?.productSevenData?.xData ?? [],
          yData: this.dataSource?.productSevenData?.yData ?? [],
        };
      } else if (statisType == "2") {
        this.productSevenData = {
          xData: this.dataSource?.productMonthData?.xData ?? [],
          yData: this.dataSource?.productMonthData?.yData ?? [],
        };
      } else if (statisType == "3") {
        this.productSevenData = {
          xData: this.dataSource?.productQuarterData?.xData ?? [],
          yData: this.dataSource?.productQuarterData?.yData ?? [],
        };
      } else if (statisType == "4") {
        this.productSevenData = {
          xData: this.dataSource?.productYearData?.xData ?? [],
          yData: this.dataSource?.productYearData?.yData ?? [],
        };
      }
      this.chartShow = true;
      this.$nextTick(() => {
        this.drawerBarChart();
      });
    },

    handelTableModal(scStatus) {
      this.tableKey = Date.now();
      this.scStatus = scStatus;
      this.tableModalVisible = true;
    },

    getData() {
      this.loading = true;
      let { tenantCode } = getLoginData();
      return new Promise((resolve, reject) => {
        beamOverview({
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            source.noCompleteRadio = 1 - source?.completeRadio ?? 0;
            this.productSevenData = source?.productSevenData ?? {};
            this.dataSource = source;
            resolve();
          })
          .catch((_) => {
            this.productSevenData = {};
            this.dataSource = {};
            reject();
          })
          .finally((_) => {
            this.chartShow = true;
            this.loading = false;
            this.$nextTick(() => {
              this.drawerBarChart();
            });
          });
      });
    },
    //柱状图
    drawerBarChart() {
      let { productSevenData } = this;
      let chart_dom = this.$refs["drawerBarChart"];
      this.chartBar = this.$echarts.init(chart_dom);
      let option = {
        title: {
          text: "近产能统计",
          top: 20,
          left: "center",
          textStyle: {
            color: "#333333",
            fontSize: 18,
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: false,
        },
        grid: {
          top: 90,
          left: 50,
          bottom: 60,
          right: 20,
        },
        xAxis: {
          data: productSevenData?.xData ?? [],
          axisLabel: {
            rotate: 20,
            color: "#666666",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: "单位：片",
          nameTextStyle: {
            fontSize: 14,
            color: "#666666",
            padding: [0, 0, 4, -10],
          },
          axisLabel: {
            color: "#666666",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "产能",
            type: "bar",
            barWidth: 14,
            data: productSevenData?.yData ?? [],
            label: {
              show: true,
              position: "top", // 顶部显示
              formatter: "{c}", // 显示数据值
              textStyle: {
                fontSize: 12, // 调整文本大小
                color: "#666666", // 调整文本颜色
              },
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#1EC7FF" },
                { offset: 1, color: "#0066FF" },
              ]),
              emphasis: {
                barBorderRadius: [0, 20, 0, 0], // 设置柱子的顶部为倾斜的
              },
            },
          },
        ],
      };
      this.chartBar.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },
    //环形图
    drawerPieChart() {
      let chart_dom = this.$refs["drawerPieChart"];
      this.chartPie = this.$echarts.init(chart_dom);
      let placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
        emphasis: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
      };
      let radius = ["64%", "84%"];
      let center = ["50%", "47%"];
      let option = {
        series: [
          //第1个图表
          {
            type: "pie",
            hoverAnimation: false, //鼠标经过的特效
            radius,
            center,
            startAngle: 225,
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: "#063C5C",
                  },
                },
              },
              {
                value: 35,
                itemStyle: placeHolderStyle,
              },
            ],
          },
          //上层环形配置
          {
            type: "pie",
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#2BDAFF",
              },
              {
                offset: 1,
                color: "#078FF7",
              },
            ]),
            hoverAnimation: false, //鼠标经过的特效
            radius,
            center,
            startAngle: 225,
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: 60,
              },
              {
                value: 20,
                itemStyle: placeHolderStyle,
              },
            ],
          },
        ],
      };
      this.chartPie.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
  },
  destroyed() {
    this.chartPie && this.chartPie.dispose();
    this.chartBar && this.chartBar.dispose();
  },
};
</script>

<style lang="less" scoped>
.beam-overview-container {
  height: 100%;
  width: 100%;
  .flex();
  @keyframes rotateAni {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotateAniReverse {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  .warp-1 {
    height: 100%;
    align-items: center;
    .flex();
    padding: 0 30px 0 30px;
    .tip-group {
      .label {
        padding-top: 6px;
        font-size: 16px;
        color: #666666;
      }
      .body {
        display: flex;
        .value {
          font-size: 32px;
          margin-right: 20px;
        }
        .pec {
          font-size: 24px;
          position: relative;
          top: 8px;
        }
      }
      .tip_1 {
        margin-bottom: 20px;
        .body {
          color: #1ccd89;
          .value {
            cursor: pointer;
          }
        }
        .block-icon {
          margin-bottom: 6px;
          .flex();
          :nth-child(1) {
            width: 24px;
            height: 10px;
            background: #1ccd89;
            margin-right: 6px;
          }
          :nth-child(2) {
            width: 40px;
            height: 10px;
            background: rgba(28, 205, 137, 0.3);
          }
        }
      }
      .tip_2 {
        .body {
          color: #ffa801;
        }
        .block-icon {
          margin-bottom: 6px;
          .flex();
          :nth-child(1) {
            width: 24px;
            height: 10px;
            background: #ffa801;
            margin-right: 6px;
          }
          :nth-child(2) {
            width: 40px;
            height: 10px;
            background: rgba(255, 168, 1, 0.3);
          }
        }
      }
    }
    .product-nums {
      width: 172px;
      height: 172px;
      .flex();
      align-items: center;
      justify-content: center;
      position: relative;
      flex-direction: column;
      margin-right: 40px;
      .out-ring {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 100%;
        animation: rotateAni 10s linear infinite;
        background: url("https://jszhgd.cn/static/pc/beamyard/green_ring.png");
        background-size: 100% 100%;
      }
      .inner-ring {
        width: 144px;
        height: 144px;
        border: 2px dashed #09c87e;
        border-radius: 50%;
        animation: rotateAniReverse 10s linear infinite;
        position: absolute;
        left: 14px;
        top: 14px;
      }
      .value {
        color: #0068b7;
        font-size: 36px;
      }
      .label {
        font-size: 16px;
        color: #666666;
      }
    }
  }
  .warp-2 {
    .flex();
    align-items: center;
    .nums-item {
      cursor: pointer;
      width: 150px;
      height: 158px;
      background: rgba(60, 165, 239, 0.2);
      border-radius: 10px;
      margin-right: 20px;
      .flex();
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      .total {
        font-size: 30px;
        color: #3ca5ef;
      }
      .name {
        font-size: 18px;
        color: #3ca5ef;
      }
      &:first-of-type {
        .total {
          font-size: 36px;
          color: #1ccd89;
        }
        .name {
          font-size: 20px;
          color: #1ccd89;
        }
        width: 173px;
        height: 158px;
        background: rgba(28, 205, 137, 0.2);
        border: 1px solid #1ccd89;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .warp-3 {
    height: 100%;
    flex: 1;
    margin-left: 20px;
    position: relative;
    .chart-dom {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .group-button {
      z-index: 9;
      position: absolute;
      top: 20px;
      right: 20px;
      .flex();
      font-size: 14px;
      color: #666666;
      height: 24px;
      border: 1px solid #00a2ff;
      border-radius: 12px;
      overflow: hidden;
      font-family: "宋体";
      div {
        cursor: pointer;
        height: 100%;
        padding: 0 10px;
        .flex();
        align-items: center;
        &:not(:last-child) {
          border-right: 1px solid #00a2ff;
        }
        &.active {
          background: #00a2ff;
          color: #fff;
        }
      }
    }
  }
}
</style>
